<template>
    <!-- 视频列表表格 -->
    <el-table :data="tableData" :row-style="{ height: '77px' }"
              style="width: 100%;height: 65vh;font-size: 15px;" border>
        <!-- 表格列 -->
        <el-table-column prop="startTime" label="开始时间" width="auto" align="center" />
        <el-table-column prop="endTime" label="结束时间" width="auto" align="center" />
        <el-table-column label="操作" fixed="right" width="200" align="center">
            <template v-slot="scope">
                <div>
                    <el-button icon="View" size="small" type="success" @click="videoLinePlay(scope.row)">播放</el-button>
                    <el-button icon="Download" size="small" type="warning"
                        @click="download(scope.row.url)">下载</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>

    <!--      分页-->
    <div style="justify-content: center;">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" :background="true"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <el-dialog :close-on-click-modal="false" :style="dialogStyle" v-model="dialogVideoVisible" title="视频播放" @close="closedialogVisible">
        <div class="video-monitor-wrapper">
            <video class="videoPlayer" :src="videoUrl" controls style="width: 100%;height: 100%" @play="playVideo"
                ref="vueMiniPlayer" type="video/mp4">
            </video>
        </div>
    </el-dialog>
</template>

<script>
import { serverIp } from "~/utils/config.js"
import request from "~/utils/request.js";
export default {
    data() {
        return {
            windowWidth: window.innerWidth,
            dialogVideoVisible: false,
            dialogVisible: false,
            form: {},
            courseOptions: [],
            teacherOptions: [],
            videoUrl: "",
            tableData: [],
            searchCourseId: '',
            searchTeachId: '',
            currentPage: 1,
            pageSize: 10,
            total: 0,
        }
    },
    computed: {
        dialogStyle() {
            return this.windowWidth <= 768 ? { width: '90%' } : { width: '50%' };
        },
    },
    mounted() {
        window.addEventListener('resize', this.handleResize);
    },
    beforeUnmount() {
        window.removeEventListener('resize', this.handleResize);
    },
    activated() {
        this.load()
    },
    methods: {
        handleResize() {
            this.windowWidth = window.innerWidth;
        },
        load() {
            request.get("/live-playback/getLivePlaybackByLiveId/", {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    liveId: this.$route.query.liveId
                }
            }).then(res => {
                if (res.code === '200') {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.msg)
                }
            });
        },
        videoLinePlay(row) {
            this.videoUrl = serverIp + row.url;
            this.dialogVideoVisible = true;
        },
        download(url) {
            const fileName = `${encodeURIComponent(url.split('/').pop())}`
            window.open(serverIp + "/api/files/download/" + fileName)
        },
        handleCurrentChange(item) {
            // 改变当前页码触发
            this.currentPage = item
            this.load()
        },
        handleSizeChange(item) {   // 改变当前每页的个数触发
            this.pageSize = item
            this.load()
        },
        // 监听vidoe播放的事件
        playVideo() {
            this.$store.commit("changePlayState", false);
        },
        closedialogVisible() {
            this.$refs.vueMiniPlayer.pause();//暂停
        },
    }
}
</script>

<style scoped>
    .exam-container {
        padding: 10px;
        display: flex;
        flex-direction: column;
    }

    .filter-section {
        background: #fff;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .filter-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .filter-group span {
        font-size: 16px;
        color: #333;
    }

    /* 修改分页布局 */
    .el-pagination {
        display: flex;
        justify-content: center;
        margin-top: 10px !important;
    }

    @media (max-width: 768px) {
        /* 分页样式 */
        .el-pagination {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .el-pagination__total {
            order: 1;
            width: 50%;
            text-align: left;
        }

        .el-pagination__sizes {
            order: 2;
            width: 50%;
            text-align: right;
        }

        .el-pagination .btn-prev,
        .el-pagination .el-pager,
        .el-pagination .btn-next {
            order: 3;
            width: 100%;
            text-align: center;
            margin: 10px 0;
        }

        .el-pagination .el-pagination__jump {
            order: 4;
            width: 100%;
            text-align: center;
        }
    }
</style>
